iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 21
0
Modern Web

Zero to hero with React.js系列 第 21

【Day 21 React】Redux 做遊戲角色陣容應用程式——趴萬

  • 分享至 

  • xImage
  •  

這次要做的專案是遊戲角色選取的應用程式
做出來的應用程式大概會像這樣:

可以從左邊的角色選項選取到右邊,陣容狀態會依被選取的角色而不斷更動。


建置環境

在專案資料夾,先安裝 redux

$ npm install redux react-redux --save

為了從頭開始一步一腳印學習,我直接把 src 資料夾刪除。刪除之後,再建一個空的 src 資料夾回來xD (其實你也可以直接刪掉資料夾裡面的東西就好),新增一個 index.js 檔案。

index.js 裡同樣的先引入需要用到 reactreactDOM

import react from 'react';
import reactDOM from 'reatc-dom';

接著建立 component 資料夾,存放所有 child component 檔案。
新增 App.js 檔案,將要用到的 component 引入

import React, { Component } from 'react';

先把要 render 的內容寫好,接著記得要 export

class App extends component{
  render(){
    return(
      <div>
          <h2>SuperSquad</h2>
      </div>
    )
  }
}

export default App;

index.js 裡 import 剛剛準備好的 App component 進來,因為我把 App.js 放在 component 資料夾中,所以路徑要寫成 './component/App'

import App from './component/App';

接著把內容渲染到頁面上

ReactDOM.render(<App />, document.getElementById('root'));

OK,現在有畫面啦~~


建置 Reducer

為什麼我要先設定 reducer 而非 store,雖然 Redux 的核心是 Store,但在建立 store 之前,我們需要至少一個 reducer。這個 reducer 描述了哪一個區塊的 store 控制頁面呈現的哪個元件。

現在,我們就要先配置好檔案結構,我們要建立 Actionreducerdata folder。
配置完畢的檔案結構如下:

我在 data 資料夾底下放了 characters.json 裡面存放一些角色資料,我們將會透過這個 json 檔來建置我們的 character reducer

reducers 底下建立 index.js,這個檔案就是我們 reducer 的根檔案(?)
所以第一件事當然就是先嵌入 json 囉~

import characters_json from '../data/characters.json';

接著重頭戲來啦~Redux reducer 的 JS 語法是要怎麼寫。。。。
reducer 基本上就是一個帶有兩個參數 function,兩個參數分別為 default stateaction。需要 action 參數是因為,我們要把它 pass 到我們的 reducer 裡,它在最後會呼叫function 裡不同環節一齊作用,然後更新 state

我們可以把 reducer 想成是咖啡機的過濾器,不同的 actions 代表著不同口味的咖啡,有 lette action, 美式 action, espresso action, 榛果 action⋯⋯。我們所選擇的口味會傳到 reducer 裡,接著更新 store,然後煮出你要的口味的咖啡,這邊我想喝玫瑰拿鐵XDDDD

來寫 function 嚕!我們讓預設的 state 等於 characters_json

function characters(state = characters_json, action){

}

接著在 function 裡面我們要寫 switch 敘述,想像剛剛的咖啡例子,透過 switch 才會知道什麼樣的 action 對應什麼樣的結果 (state)。
switch 的判斷敘述:
每一個 action 都有它獨具的 type 屬性,因此我們透過 action.type 來識別不同的 action

switch(action.type){

}

第一個內容就放預設,回傳整個 characters.json 裡的陣列內容

switch(action.type){
    default:
      return state;
}

記得最後一行要 export~

export default characters;

呼叫 Provider 和 Store

設置完 reducer 之後,我們便可以在主檔案呼叫它進來,在 src/index.js 之中 import

import rootReducer from './reducers';

redux 提供 provider

import { provider } from 'react-redux';

同時,我們也要引入 createStore

import { createStore } from 'redux';

接著我們要定義 constant,讓它等於 createStore,並把我們的 reducer 傳入

const store = createStore(rootReducer);

截至目前為止,我們已經透過 providerstore 綁定好了應用程式要用到的元素。再來,再渲染的地方寫上 provider tag

ReactDOM.render(
  <Provider store={store}>
      <App />
  </Provider>, 
  document.getElementById('root'));
  

我先透過

console.log(store.getState());

測試現在資料抓取得結果

好der 看起來是有抓到一個包含十個物件的陣列~
明日來弄第一個 Action 和建置第二個 Reducer


上一篇
【Day20 React】Redux 入門
下一篇
【Day 22 React】Redux 做遊戲角色陣容應用程式——趴兔
系列文
Zero to hero with React.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言